<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>video</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
            box-sizing: border-box;
        }

        section {
            position: fixed;
            width: 900px;
            height: 600px;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

    </style>

</head>
<body>
<section>
    <video width="100%" height="100%" id="video1"></video>
</section>

<script type="text/javascript" src="depend/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="depend/videoCT.js"></script>
<script type="text/javascript">

    //初始化
    var video = $('#video1').videoCt({
        title: 'jq22 html5自定义视频控件',              //标题
        volume: 0.6,                //音量
        barrage: true,              //弹幕开关
        comment: true,              //弹幕
        reversal: true,             //镜像翻转
        playSpeed: true,            //播放速度
        update: false,               //下载
        autoplay: false,            //自动播放
        clarity: {
            type: ['360P','480P'],            //清晰度
            src: ['http://jq22.qiniudn.com/jq22.mp4',
                'http://jq22.qiniudn.com/jq22.mp4']      //链接地址
        },
        commentFile: 'comment.json'           //导入弹幕json数据
    });

    //播放结束事件
    $('#video1').on('ended', function() {
        console.log('弹幕json数据：\n'+ video.comment());//获取弹幕json数据 comment.json
    });
</script>
</body>
</html>